<template>
  <div v-loading="loading" class="box">
    <div class="leftTent">
      <div style="display: flex; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #EAEAEA;">
        <el-select   style="flex: 1; margin-right: 10px; margin-left: 15px;" v-model="queryParams.isOpen" placeholder="请选择公开">
          <el-option :value="1" label="是" />
          <el-option :value="0" label="否" />
        </el-select>
        <el-popover placement="bottom-end" v-model="visible" width="350" trigger="click">
          <div>
            <el-form :model="queryParams" ref="queryForm" label-width="70px">
              <el-form-item label="项目年度" prop="title">
                <el-date-picker v-model="queryParams.year" format="yyyy" value-format="yyyy" type="year" placeholder="请选择项目年度">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="项目名称" prop="type">
                <el-select  multiple collapse-tags   v-model="queryParams.type" placeholder="请选择公告类型">
                  <el-option v-for="dict in dict.type.gglx" :key="dict.label" :value="dict.label" :label="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="发起人" prop="grade">
                <el-select  multiple  collapse-tags  v-model="queryParams.grade" placeholder="请选择公告等级">
                  <el-option v-for="dict in dict.type.ggdj" :key="dict.label" :value="dict.label" :label="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="发起日期" prop="grade">
                <el-date-picker type="daterange" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label-width="0">
                <div style="display: flex; justify-content: space-between;">
                  <el-button @click="changeForm" type="text">清除筛选条件</el-button>
                  <div>
                    <Button style="margin: 0 5px;" @click="visible = false">取消</Button>
                    <Button style="margin: 0 5px;" @click="searchList" :loading="loading" icon="el-icon-search" type="primary">查询</Button>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <el-button slot="reference" type="text" style="padding-right: 15px;" @click="handleUpdate(row)">更多筛选<i class="el-icon-s-operation"></i></el-button>
        </el-popover>

      </div>
      <div style=" height: calc(100% - 35px); transform: translate(0);">
        <div style="height: 100%; overflow: auto;" ref="scroll" @scroll.passive="getScroll($event)">
          <!-- 回到顶部 -->
          <transition name="fade">
            <div v-show="scrollSta" @click="cScroll" class="scrollDown">
              <i class="el-icon-caret-top"></i>
            </div>
          </transition>
          <load-more :pageNum.sync="queryParams.pageNum" :pages="pages" :disabled.sync="disabled" @changeData="changPages">
            <div>
              <div v-for="(item, index) in tableData" class="tent_left">
                <div class="left_one">
                  <div>
                    <span style="font-weight: 700;">年度检修计划</span>
                    <span class="one_text">2022年</span>
                  </div>
                  <div>
                    <div class="text_store" :class="getStore(3)">
                      审批中
                    </div>
                  </div>
                </div>
                <div class="tent_tent">
                  <p>检修计划名称：1#机组检修</p>
                  <p>单位名称：天津盘山电力有限公司</p>
                  <p>发起时间：2022-09-12 12:00:03 拷贝</p>
                </div>
                <div class="tent_foot">
                  <div style="">
                    <img src="@/assets/images/carbon0.png" style="width: 30px; height: 30px; margin-right: 7px;" alt="">
                    <span>成吉思汗</span>
                  </div>
                  <div>发布时间</div>
                </div>
              </div>
            </div>
          </load-more>
        </div>
      </div>
    </div>
    <div class="rightTent" style=" overflow: auto;">
      <div>
        <div style="display: flex; align-items: center;">
          <div style="margin-right: 10px;">
            <span style="font-weight: 700;">年度检修计划</span>
          </div>
          <div class="text_store" :class="getStore(3)">
            审批中
          </div>
        </div>
        <div style="margin-top: 10px;">
          <div style="display: flex; align-items: center;">
            <img src="@/assets/images/carbon0.png" style="width: 30px; height: 30px; margin-right: 7px;" alt="">
            <span>成吉思汗</span>
            <div class="icon_bgc">项目总监</div>
            <div class="icon_bgc">项目总监</div>
          </div>
        </div>
        <el-tabs v-model="activeName" style="margin-top: 5px;">
          <el-tab-pane label="基本资料" name="0">

            <el-form ref="queryForm" :model="formData" :rules="rulesSon" label-width="80px">
              <el-form-item prop="title">
                <el-input v-model="formData.title" placeholder="请输入公告标题（2～30个字）" />
              </el-form-item>
              <el-form-item prop="content">
                <editor v-model="formData.content" :minHeight="150"></editor>
              </el-form-item>
              <el-form-item label="公告类型" prop="type">
                <el-select    v-model="formData.type" placeholder="请选择公告类型">
                  <el-option v-for="dict in dict.type.gglx" :key="dict.label" :value="dict.label" :label="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="公告等级" prop="grade">
                <el-select    v-model="formData.grade" placeholder="请选择公告等级">
                  <el-option v-for="dict in dict.type.ggdj" :key="dict.label" :value="dict.label" :label="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="定时发布" prop="createTime">
                <el-date-picker v-model="formData.createTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="公开" prop="isTopping">
                <el-checkbox :value="!!formData.isTopping" @change="formTopping"></el-checkbox>
              </el-form-item>
              <el-form-item label="置顶" prop="isOpen">
                <el-checkbox :value="!!formData.isOpen" @change="formIsOpen"></el-checkbox>
              </el-form-item>

              <el-form-item label="置顶" prop="isOpen">
                <el-checkbox :value="!!formData.isOpen" @change="formIsOpen"></el-checkbox>
              </el-form-item>

              <el-form-item label="置顶" prop="isOpen">
                <el-checkbox :value="!!formData.isOpen" @change="formIsOpen"></el-checkbox>
              </el-form-item>

              <el-form-item label="置顶" prop="isOpen">
                <el-checkbox :value="!!formData.isOpen" @change="formIsOpen"></el-checkbox>
              </el-form-item>

              <el-form-item label="置顶" prop="isOpen">
                <el-checkbox :value="!!formData.isOpen" @change="formIsOpen"></el-checkbox>
              </el-form-item>

              <el-form-item class="searchFromButton" style="margin: 0;">
                <div>
                  <Button :loading="loading" style="background-color: #FE5A57; border: 0; color: #fff; margin: 0 5px;" @click="$emit('close')">拒绝</Button>
                  <Button style="margin: 0 5px;" @click="$emit('submit')" :loading="loading" type="primary">同意</Button>
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="审批信息" name="1">
            <div>
              <div class="max_flex">
                <div class="max_tent">
                  <div class="tent_one">
                    <i style="font-size: 12px; color: #fff;" class="el-icon-check"></i>
                  </div>
                  <img style="width: 40px; height: 40px;" src="@/assets/images/carbon1.png" alt="">
                  <div class="xian">
                    <div class="xian_icon"></div>
                  </div>
                </div>
                <div class="foot_one">
                  <div class="one">姓名</div>
                  <div class="two">通过了吗</div>
                  <div style="margin-bottom: 15px;">
                    <span class="text">通过了吗</span>
                  </div>
                  <div class="text1 max_tent">
                    <img style="width: 30px; height: 30px;" src="@/assets/images/carbon1.png" alt="">
                    <span>123122312</span>
                    <div class="tent_one1">
                      <i style="font-size: 12px; color: #fff;" class="el-icon-check"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
// 富文本组件
import Editor from "@/components/Editor"
// 上滑加载更多
import LoadMore from "@/components/LoadMore/LoadMore";
import Audit from "../../components/audit/audit.vue";
export default {
  components: {
    Audit,
    LoadMore,
    Editor
  },
  dicts: ["gglx", "ggdj"],
  name: "AuditExamineAwait",
  data() {
    return {
      activeName: "0",
      disabled: false,
      visible: false,
      loading: true, // 加载
      // list 参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      pages: 1,
      total: 0, // table total
      tableData: [], // table Data
      showModal: false, // 弹窗
      // form Data
      formData: {
        id: undefined,
        title: undefined,
        content: undefined,
        type: undefined,
        grade: undefined,
        isTopping: 1,
        isOpen: 0,
      },
      // 表单校验
      rulesSon: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        content: [{ required: true, message: "正文不能为空", trigger: "blur" }],
        type: [
          { required: true, message: "公告类型不能为空", trigger: "change" },
        ],
        grade: [
          { required: true, message: "公告等级不能为空", trigger: "change" },
        ],
        createTime: [
          { required: true, message: "定时发布不能为空", trigger: "change" },
        ],
      },
      ids: [], // table 勾选项
      title: undefined,
      time: null,
      scrollSta: false,
    };
  },
  created() {
    this.getList();
  },
  computed: {
    getStore() {
      return (type) => {
        switch (type) {
          case 1:
            return "type1";
          case 2:
            return "type2";
          case 3:
            return "type3";
          case 4:
            return "type4";

          default:
            break;
        }
      };
    },
  },
  methods: {
    cScroll() {
      this.scrollSta = false;
      this.$refs.scroll.scrollTop = 0;
    },
    getScroll(event) {
      if (this.time) {
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        // 滚动条距离底部的距离
        if (event.target.scrollTop > 1500) {
          //  操作
          this.scrollSta = true;
        } else {
          this.scrollSta = false;
        }
      }, 100);
    },
    changPages() {
      this.getList();
    },
    changeForm() {
      this.resetForm("queryForm");
      this.getList();
    },
    // 列表 List
    getList() {
      this.loading = true;
      let params = {
        ...this.queryParams,
      };
      http.getList(params).then(({ stateCode, result }) => {
        if (stateCode == 200) {
          this.loading = false;
          this.tableData.push(...result.records);
          this.total = result.total;
          this.pages = result.pages;
        }
      });
    },
    // 查询 list
    searchList() {
      this.visible = false;
      this.queryParams.pageNum = 1;
      (this.disabled = false), (this.tableData = []);
      this.getList();
    },
    // 表单重置
    reset() {
      this.resetForm("queryForm");
      this.formData = {
        id: undefined,
        title: undefined,
        content: undefined,
        type: undefined,
        grade: undefined,
        isTopping: 1,
        isOpen: 0,
        createTime: undefined,
      };
    },
    // Update 弹出
    handleUpdate(row) {
      this.reset();
      this.formData = {
        id: row.id,
        title: row.title,
        content: row.content,
        type: row.type,
        grade: row.grade,
        isOpen: row.isOpen,
        createTime: row.createTime,
      };
      this.showModal = true;
    },
    // add 是否置顶
    formTopping(value) {
      this.formData.isTopping = value ? 1 : 0;
    },
    // add 是否公开
    formIsOpen(value) {
      this.formData.isOpen = value ? 1 : 0;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  height: calc(100vh - 140px);
  display: flex;
  .leftTent {
    flex: 0 0 350px;
    padding: 15px 0;
    background: white;
    border-radius: 3px;
    margin: 0px 15px 20px 15px;
  }
  .rightTent {
    flex: 1;
    background: white;
    border-radius: 3px;
    margin: 0px 15px 20px 0;
    padding: 24px 26px;
  }
  .tent_left {
    margin-bottom: 10px;
    background: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(55, 90, 228, 0.16);
    border-radius: 2px;
    margin: 10px;
    transition: 0.3s;
    cursor: pointer;
    &:hover {
      box-shadow: 0px 0px 10px 0px rgba(55, 90, 228, 0.36);
    }
    &:active {
      transform: translateY(3px);
    }
    .left_one {
      display: flex;
      justify-content: space-between;
      padding: 8px 15px; //
      align-items: center;
      border-bottom: 1px solid #eaeaea;
      .one_text {
        background-color: #f5f7fc;
        color: #565656;
        padding: 3px 5px;
        margin-left: 10px;
        border-radius: 3px;
      }
      .text_store {
        width: 82px;
        height: 30px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s;
      }
      .type1 {
        color: #496dff;
        background: #f5f7fc;
        border: 1px solid #5a8bff;
        &:hover {
          background: #edf1fb;
        }
      }
      .type2 {
        color: #fe5a57;
        background: #fff3f3;
        border: 1px solid #fe5a57;
        &:hover {
          background: #fbe6e6;
        }
      }
      .type3 {
        color: #39ce78;
        background: #f5fff9;
        border: 1px solid #39ce78;
        &:hover {
          background: #e7fbee;
        }
      }
      .type4 {
        color: #496dff;
        background: #f5f7fc;
        border: 1px solid #5a8bff;
        &:hover {
          background: #ebf1fe;
        }
      }
    }
  }
  .left_one {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px; //
    align-items: center;
    border-bottom: 1px solid #eaeaea;
  }
  .one_text {
    background-color: #f5f7fc;
    color: #565656;
    padding: 3px 5px;
    margin-left: 10px;
    border-radius: 3px;
  }
  .text_store {
    width: 82px;
    height: 30px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .type1 {
    color: #496dff;
    background: #f5f7fc;
    border: 1px solid #5a8bff;
  }
  .type2 {
    color: #fe5a57;
    background: #fff3f3;
    border: 1px solid #fe5a57;
  }
  .type3 {
    color: #39ce78;
    background: #f5fff9;
    border: 1px solid #39ce78;
  }
  .type4 {
    color: #496dff;
    background: #f5f7fc;
    border: 1px solid #5a8bff;
  }
  .tent_tent {
    padding: 15px;
    p {
      line-height: 26px;
    }
  }
  .tent_foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px 15px;
  }
  .icon_bgc {
    background: #f5f7fc;
    border: 1px solid #edf4ff;
    border-radius: 15px;
    padding: 5px 10px;
    margin-left: 10px;
  }
  .max_flex {
    display: flex;
  }
  .max_tent {
    position: relative;
    top: 0;
    .tent_one {
      position: absolute;
      top: 28px;
      left: 28px;
      border-radius: 50%;
      width: 12px;
      height: 12px;
      background-color: #39ce78;
    }
  }
}
.xian {
  margin-left: 20px;
  height: 100%;
  .xian_icon {
    width: 2px;
    border: 1px solid #eaeaea;
    height: 100%;
    min-height: 50px;
  }
}
.foot_one {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding-bottom: 20px;
  .one {
    margin-bottom: 12px;
  }
  .two {
    margin-bottom: 15px;
    color: #39ce78;
  }
  .text {
    background: #f5f7fc;
    border: 1px solid #edf4ff;
    border-radius: 2px 2px 2px 15px;
    padding: 5px 10px;
  }
  .text1 {
    padding: 3px 6px;
    background: #f5f7fc;
    border: 1px solid #edf4ff;
    border-radius: 18px;

    .tent_one1 {
      position: absolute;
      right: 0px;
      top: -5px;
      border-radius: 50%;
      width: 12px;
      height: 12px;
      background-color: #39ce78;
    }
  }
}
.scrollDown {
  cursor: pointer;
  position: fixed;
  bottom: 40px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.55);
  width: 40px;
  height: 40px;
  box-shadow: 0 0 6px rgba(0, 21, 41, 0.35);
  // box-shadow: 0 0 6px rgb(0 0 0 / 12%);
  color: #496dff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  i {
    font-size: 28px;
    transition: 0.3s;
  }
}
.scrollDown:hover {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px rgba(0, 21, 41, 0.55);
}
</style>
